<!--培训计划开始以后-->
<template>
  <article class="page">
    <headerbar>培训详情</headerbar>

    <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler"/>

    <section class="frame-content bg-light-gray">


      <!--培训方案-->
      <section v-if="'培训方案'==current" class="inner-content pdv-9 pdh-4 inner-noborder">
        <div class="input-column-wrap">
          <div class="name">培训计划名称：</div>
          <div class="text-left input-value color-tip">{{data.trainingclass}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">办班单位：</div>
          <div class="text-left input-value color-tip">{{data.deptname}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训对象：</div>
          <div class="text-left input-value color-tip">{{data.text}}</div>
        </div>

        <div class="input-column-wrap">
          <div class="name">培训人数：</div>
          <div class="text-left input-value color-tip">{{data.number}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训期数：</div>
          <div class="text-left input-value color-tip">{{data.numberofperiods}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训天数：</div>
          <div class="text-left input-value color-tip">{{data.days}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训地点：</div>
          <div class="text-left input-value color-tip">{{data.div}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训时间：</div>
          <div class="text-left input-value color-tip">{{data.time}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">培训费用：</div>
          <div class="text-left input-value color-tip">{{data.trainmoney}}</div>
        </div>
        <div class="input-column-wrap">
          <div class="name">减少金额：</div>
          <div class="text-left input-value color-tip">{{data.jsje}}</div>
        </div>
        <div class="input-column-wrap flex-start">
          <div class="name">培训内容：</div>
          <div class="color-tip pdh-3">{{data.trainingcontent}}</div>
        </div>


      </section>

      <!--教学计划-->
      <section class="block " v-if="detail.classList && '教学计划'==current">
        <div class="pdv-3 list-news-img list-wenda">
          <div v-for="(item,index) in detail.classList" :key="index" class="item">
            <div class="cont  pdh-0">
              <div class="title">{{index+1}}、班级名称：{{item.className}}</div>
              <div class="">
                <p class="tip">主办单位：{{item.deptname}} <i class="pdh-2"></i>  </p>
                <p class="tip">地点：{{item.place}} <i class="pdh-2"></i>  </p>
              </div>
            </div>

          </div>
        </div>
      </section>

      <!--教学计划-->
      <section class="block " v-if="detail.curriculumList && '教学计划'==current">
        <div class="pdv-3 list-news-img list-wenda mgh-2">
          <div v-for="(item,index) in detail.curriculumList" :key="index" class="item">
            <div class="cont  pdh-0">
              <div class="title">{{index+1}}、课程名称：{{item.name}}</div>
              <div class="">
                <p class="tip">讲师：{{item.lecturerName}} <i class="pdh-2"></i>  班级名称：{{item.className}}</p>
                <p class="tip">模块：{{item.modular}}  <i class="pdh-2"></i> 学时：{{item.classHour}} </p>
                <p class="tip">培训时间：{{item.beginData}} - {{item.endData}}</p>
              </div>
            </div>

          </div>
        </div>
      </section>

      <!--出勤情况-->
      <!--<section class=" pdv-3 ">
        <section class="people-list ">

          <div class="people-item bg-white block" v-for="item in 5">
            <section class="people-info">
              <div class="avatar-img">
                <img src="../../../../static/images/default.jpg" alt="">
              </div>
              <span class="name">经开区</span>
            </section>
            <span class="">
              <span class="tip pdh-2">缺席：3天</span>
              <span class="tip pdh-2">出席：<span class="color-red">3天</span></span>
            </span>
          </div>
        </section>
      </section>-->


      <!--学员名单-->
      <section class=" pdv-3 " v-if="detail.userContactList && '学员名单'==current">
        <section class="people-list ">

          <div class="people-item bg-white block" v-for="item in detail.userContactList">
            <section class="people-info">
              <span class="name">{{item.userName}}</span>
            </section>
            <span class="">
            </span>
          </div>
        </section>
      </section>

      <!--学习心得-->
     <!-- <section class="block pdv-3 pdh-3">
        <div class="title">学习心得：</div>
        <div class="big-textarea">
          <textarea  cols="30" rows="10"></textarea>
        </div>
      </section>-->

      <!--培训评分-->
      <!--<section class="block pdv-3 pdh-3">
        <section class="block " v-if="detail.curriculumList">
          <div class="pdv-3 list-news-img list-wenda mgh-2">
            <div v-for="(item,index) in detail.curriculumList" :key="index" class="item">
              <div class="cont  pdh-0">
                <div class="title">{{index+1}}、课程名称：{{item.name}}</div>
                <div class="">
                  <p class="tip">讲师：{{item.lecturerName}} <i class="pdh-2"></i>  班级名称：{{item.className}}</p>
                  <p class="tip">模块：{{item.modular}}  <i class="pdh-2"></i> 学时：{{item.classHour}} </p>
                  <p class="tip">培训时间：{{item.beginData}} - {{item.endData}}</p>
                </div>
              </div>

            </div>
          </div>
        </section>
      </section>-->


    </section>
  </article>
</template>

<script>
  export default {
    name: 'trainingplanClassDetail',
    data () {
      return {
        currentIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        isLoading: true,
        detail: {},
        menuList: [],
        list: [],
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        id: '',
        current: '培训方案',
        labels: [
          '培训方案',
          '教学计划',
          '学员名单',
//          '出勤情况',
//          '学习心得',
//          '培训评分'
        ]
      }
    },
    created () {
      this.data = this.$store.state.trainingPlanDetail
      this.id = this.$route.query.id
      this.loadData(this.id)
    },
    methods: {
      changeHandler (cur) {
        this.current = cur
      },
      loadData () {
        let query = this.$route.query
        let params = {
          id: this.$route.query.id,
          numberofperiods: query.numberofperiods
        }
        this.fetchService.trainingPlanInfo(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.data = _.extend(this.data, res.data)
          this.detail = this.data
        })
      }
    }
  }
</script>

